<template>
  <div class="device-list">
    <div class="page-header">
      <h2>设备管理</h2>
      <div class="header-actions">
        <el-input
          v-model="searchQuery"
          placeholder="搜索设备"
          prefix-icon="el-icon-search"
          clearable
          class="search-input">
        </el-input>
        <el-button type="primary" @click="addDevice">添加设备</el-button>
      </div>
    </div>

    <el-table :data="filteredDevices" style="width: 100%">
      <el-table-column prop="name" label="设备名称"></el-table-column>
      <el-table-column prop="type" label="类型">
        <template #default="scope">
          {{ getDeviceTypeName(scope.row.type) }}
        </template>
      </el-table-column>
      <el-table-column prop="room" label="房间"></el-table-column>
      <el-table-column label="状态">
        <template #default="scope">
          <el-switch
            v-model="scope.row.status"
            @change="() => toggleDevice(scope.row.id)"
            active-color="#13ce66"
            inactive-color="#ff4949">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200">
        <template #default="scope">
          <el-button
            size="small"
            @click="editDevice(scope.row)">
            编辑
          </el-button>
          <el-button
            size="small"
            type="danger"
            @click="removeDevice(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加/编辑设备对话框 -->
    <el-dialog
      :title="isEdit ? '编辑设备' : '添加设备'"
      v-model="dialogVisible"
      width="30%">
      <el-form :model="deviceForm" label-width="80px">
        <el-form-item label="设备名称">
          <el-input v-model="deviceForm.name"></el-input>
        </el-form-item>
        <el-form-item label="设备类型">
          <el-select v-model="deviceForm.type">
            <el-option
              v-for="type in deviceTypes"
              :key="type.id"
              :label="type.name"
              :value="type.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所在房间">
          <el-select v-model="deviceForm.room">
            <el-option
              v-for="room in rooms"
              :key="room.id"
              :label="room.name"
              :value="room.name">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmDevice">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useStore } from 'vuex'

export default {
  name: 'DeviceList',
  setup() {
    const store = useStore()
    const searchQuery = ref('')
    const dialogVisible = ref(false)
    const isEdit = ref(false)
    const deviceForm = ref({
      id: null,
      name: '',
      type: '',
      room: '',
      status: false
    })

    // 获取所有设备列表
    const devices = computed(() => {
      return store.getters.allDevices
    })

    const deviceTypes = computed(() => store.state.deviceTypes)
    const rooms = computed(() => store.state.rooms)

    const filteredDevices = computed(() => {
      if (!searchQuery.value) return devices.value
      const query = searchQuery.value.toLowerCase()
      return devices.value.filter(device => 
        device.name.toLowerCase().includes(query) ||
        device.room.toLowerCase().includes(query) ||
        getDeviceTypeName(device.type).toLowerCase().includes(query)
      )
    })

    const getDeviceTypeName = (typeId) => {
      const type = deviceTypes.value.find(t => t.id === typeId)
      return type ? type.name : typeId
    }

    const toggleDevice = (deviceId) => {
      store.dispatch('toggleDevice', deviceId)
    }

    const addDevice = () => {
      isEdit.value = false
      deviceForm.value = {
        id: null,
        name: '',
        type: '',
        room: rooms.value.length > 0 ? rooms.value[0].name : '',
        status: false
      }
      dialogVisible.value = true
    }

    const editDevice = (device) => {
      isEdit.value = true
      deviceForm.value = { ...device }
      dialogVisible.value = true
    }

    const confirmDevice = () => {
      if (deviceForm.value.name && deviceForm.value.type && deviceForm.value.room) {
        if (isEdit.value) {
          store.dispatch('updateDeviceProperty', {
            deviceId: deviceForm.value.id,
            property: 'name',
            value: deviceForm.value.name
          })
          store.dispatch('updateDeviceProperty', {
            deviceId: deviceForm.value.id,
            property: 'room',
            value: deviceForm.value.room
          })
        } else {
          store.dispatch('addDevice', {
            roomName: deviceForm.value.room,
            device: {
              name: deviceForm.value.name,
              type: deviceForm.value.type,
              status: false
            }
          })
        }
        dialogVisible.value = false
      }
    }

    const removeDevice = (device) => {
      store.dispatch('removeDevice', {
        roomName: device.room,
        deviceId: device.id
      })
    }

    return {
      searchQuery,
      dialogVisible,
      isEdit,
      deviceForm,
      devices,
      deviceTypes,
      rooms,
      filteredDevices,
      getDeviceTypeName,
      toggleDevice,
      addDevice,
      editDevice,
      confirmDevice,
      removeDevice
    }
  }
}
</script>

<style scoped>
.device-list {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-actions {
  display: flex;
  gap: 15px;
}

.search-input {
  width: 300px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
</style> 